<template>
  <div v-loading="loading" element-loading-text="加载中">
    <el-form ref="purchaseOrderForm" :model="purchaseOrderForm" :rules="rules" label-width="130px" style="width: 530px">
      <el-form-item label="收货地址：" prop="consigneeArea">
        <el-select class="width-130" v-model="purchaseOrderForm.consigneeProvinceCode" placeholder="请选择省份" clearable
          @change="changeCity(purchaseOrderForm.consigneeProvinceCode)">
          <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
          </el-option>
        </el-select>
        <el-select class="width-130" v-model="purchaseOrderForm.consigneeCityCode" placeholder="请选择城市" clearable
          @change="changeDistrict(purchaseOrderForm.consigneeCityCode)">
          <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
          </el-option>
        </el-select>
        <el-select class="width-130" v-model="purchaseOrderForm.consigneeDistrictCode" placeholder="请选择区县" clearable>
          <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址：" prop="consigneeAddress">
        <el-input v-model="purchaseOrderForm.consigneeAddress" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="收货人：" prop="consignee">
        <el-input v-model="purchaseOrderForm.consignee" placeholder="请输入收货人姓名"></el-input>
      </el-form-item>
      <el-form-item label="收货人电话：" prop="consigneePhone">
        <el-input v-model="purchaseOrderForm.consigneePhone" placeholder="请输入收货人电话" maxlength="11"
          oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
          onkeyup="this.value=this.value.replace(/\D/g,'')">
        </el-input>
      </el-form-item>
      <el-form-item label="供应商：">
        <el-select v-model="purchaseOrderForm.supplierId" :disabled="supplierEditFlag">
          <el-option label="不限" value=""></el-option>
          <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplierName"
            :value="item.supplierId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" v-model="purchaseOrderForm.remark" :rows="3"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSave">保存</el-button>
      <el-button @click="doCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
  import {
    listSupplier
  } from '@/api/user/supplier'
  import {
    listProvince,
    listCity,
    listDistrict
  } from '@/api/area/area'
  import {
    getWarehouse
  } from '@/api/warehouse/warehouseInfo'
  import {
    getPurchaseOrder,
    savePurchaseOrder
  } from '@/api/warehouse/purchaseOrder'
  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 采购单对象
      purchaseOrder: {
        type: Object,
        default() {
          return {}
        }
      },
      // 结算类型 10: 成本代销 20: 扣率代销 30：成本经销
      settlementType: {
        type: Number,
        default: null
      }
    },
    data() {
      const validateConsigneeArea = (rule, value, callback) => {
        if (!this.purchaseOrderForm.consigneeProvinceCode) {
          callback(new Error('请选择省份'))
        }
        if (!this.purchaseOrderForm.consigneeCityCode) {
          callback(new Error('请选择城市'))
        }
        if (!this.purchaseOrderForm.consigneeDistrictCode) {
          callback(new Error('请选择地区'))
        }
        callback()
      }
      return {
        // 仓库信息对象
        warehouseInfoObj: {},
        // 采购订单表单
        purchaseOrderForm: {},
        // 表单规则
        rules: {
          consigneeArea: [{
            required: true,
            validator: validateConsigneeArea,
            trigger: 'blur'
          }],
          consigneeAddress: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          consignee: [{
            required: true,
            message: '请输入收货人',
            trigger: 'blur'
          }],
          consigneePhone: [{
            required: true,
            message: '请输入收货人电话',
            trigger: 'blur'
          }]
        },
        loading: false,
        dialogTitle: '',
        // 供应商编辑Flag
        supplierEditFlag: false,
        // 供应商集合
        supplierList: [],
        // 省集合
        provinceList: [],
        // 市集合
        cityList: [],
        // 区集合
        districtList: []
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.loading = true
          this.init()
        }
      }
    },
    created() {
      this.loading = true
      const supplierForm = {
        enterpriseId: this.getEnterpriseId()
        // settlementType: 30
      }
      if (this.settlementType) {
        supplierForm.settlementType = this.settlementType
      }
      // 获取供应商列表
      listSupplier(supplierForm).then(response => {
        if (response.isError) return
        this.supplierList = response.data
      })
      // 获取省列表
      listProvince().then(response => {
        this.provinceList = response.data
      })
      this.initForm()
      Object.assign(this.purchaseOrderForm, this.purchaseOrder)
      // 获取仓库信息
      getWarehouse(this.getWarehouseId()).then((response) => {
        this.warehouseInfoObj = response.data
        this.init()
      })
    },
    methods: {
      // 初始化
      init() {
        // 赋默认值
        if (!this.purchaseOrderForm.consigneeProvinceCode) {
          this.purchaseOrderForm.consigneeProvinceCode = this.warehouseInfoObj.warehouseProvinceCode
        }
        if (!this.purchaseOrderForm.consigneeCityCode) {
          this.purchaseOrderForm.consigneeCityCode = this.warehouseInfoObj.warehouseCityCode
        }
        if (!this.purchaseOrderForm.consigneeDistrictCode) {
          this.purchaseOrderForm.consigneeDistrictCode = this.warehouseInfoObj.warehouseDistrictCode
        }
        if (!this.purchaseOrderForm.consigneeAddress) {
          this.purchaseOrderForm.consigneeAddress = this.warehouseInfoObj.warehouseAddress
        }
        if (!this.purchaseOrderForm.consignee) {
          this.purchaseOrderForm.consignee = this.warehouseInfoObj.contact
        }
        if (!this.purchaseOrderForm.consigneePhone) {
          this.purchaseOrderForm.consigneePhone = this.warehouseInfoObj.contactPhone
        }
        this.changeCity(this.purchaseOrderForm.consigneeProvinceCode, this.purchaseOrderForm.consigneeCityCode, this
          .purchaseOrderForm.consigneeDistrictCode)
        if (this.purchaseOrderForm.disableSelectSupplier) {
          // 优先判断是否禁止选择供应商
          this.supplierEditFlag = true
        } else {
          // 判断是否有明细
          if (this.purchaseOrderForm.purchaseOrderId) {
            getPurchaseOrder(this.purchaseOrderForm.purchaseOrderId).then(response => {
              this.supplierEditFlag = response.data.purchaseOrderGoodsList.length > 0
            })
          }
        }
        this.loading = false
      },
      // 初始化表单
      initForm() {
        this.purchaseOrderForm = {
          purchaseOrderId: '',
          supplierId: '',
          consigneeProvinceCode: '',
          consigneeCityCode: '',
          consigneeDistrictCode: '',
          consigneeAddress: '',
          consignee: '',
          consigneePhone: '',
          remark: '',
          warehouseGoodsIds: []
        }
      },
      // 获取地址-市
      changeCity(provinceCode, cityCode, districtCode) {
        this.cityList = []
        this.districtList = []
        this.purchaseOrderForm.consigneeCityCode = ''
        this.purchaseOrderForm.consigneeDistrictCode = ''
        if (provinceCode) {
          listCity(provinceCode).then(response => {
            this.cityList = response.data
          })
          this.purchaseOrderForm.consigneeCityCode = cityCode
          this.changeDistrict(cityCode, districtCode)
        }
      },
      // 获取地址-区
      changeDistrict(cityCode, districtCode) {
        this.districtList = []
        this.purchaseOrderForm.consigneeDistrictCode = ''
        if (cityCode) {
          listDistrict(cityCode).then(response => {
            this.districtList = response.data
          })
          this.purchaseOrderForm.consigneeDistrictCode = districtCode
        }
      },
      // 保存事件
      doSave() {
        this.$refs['purchaseOrderForm'].validate((valid) => {
          if (valid) {
            if (!this.purchaseOrderForm.purchaseOrderId) {
              this.purchaseOrderForm.enterpriseId = this.getEnterpriseId()
              this.purchaseOrderForm.warehouseId = this.getWarehouseId()
            }
            this.purchaseOrderForm.purchaseOrderType = 1
            this.loading = true
            savePurchaseOrder(this.purchaseOrderForm).then(response => {
              this.loading = false
              if (response.isError) return
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.$emit('callback', true)
            })
          }
        })
      },
      // 取消事件
      doCancel() {
        this.$emit('callback', false)
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
